<template>
  <div>
    <a-form-model
      ref="loginForm"
      :model="form.model"
      :rules="form.rules"
      layout="vertical"
      @keyup.enter.native="handleLogin"
    >
      <a-form-model-item
        v-if="!form.needAuthCode"
        class="animated fadeInUp"
        :style="{'animation-delay': '0.1s'}"
        prop="username"
      >
        <a-input
          placeholder="用户名/邮箱"
          v-model="form.model.username"
        >
          <a-icon
            slot="prefix"
            type="user"
            style="color: rgba(0,0,0,.25)"
          />
        </a-input>
      </a-form-model-item>
      <a-form-model-item
        v-if="!form.needAuthCode"
        class="animated fadeInUp"
        :style="{'animation-delay': '0.2s'}"
        prop="password"
      >
        <a-input
          v-model="form.model.password"
          type="password"
          placeholder="密码"
        >
          <a-icon
            slot="prefix"
            type="lock"
            style="color: rgba(0,0,0,.25)"
          />
        </a-input>
      </a-form-model-item>
      <a-form-model-item
        v-if="form.needAuthCode"
        class="animated fadeInUp"
        :style="{'animation-delay': '0.1s'}"
        prop="authcode"
      >
        <a-input
          placeholder="两步验证码"
          v-model="form.model.authcode"
          :maxLength="6"
        >
          <a-icon
            slot="prefix"
            type="safety-certificate"
            style="color: rgba(0,0,0,.25)"
          />
        </a-input>
      </a-form-model-item>
      <a-form-model-item
        class="animated fadeInUp"
        :style="{'animation-delay': '0.3s'}"
      >
        <a-button
          :loading="form.logging"
          type="primary"
          :block="true"
          @click="handleLoginClick"
        >{{ buttonName }}</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import adminApi from '@/api/admin'
import { mapActions } from 'vuex'
export default {
  name: 'LoginForm',
  data() {
    const authcodeValidate = (rule, value, callback) => {
      if (!value && this.form.needAuthCode) {
        callback(new Error('* 请输入两步验证码'))
      } else {
        callback()
      }
    }
    return {
      form: {
        model: {
          authcode: null,
          password: null,
          username: null
        },
        rules: {
          username: [{ required: true, message: '* 用户名/邮箱不能为空', trigger: ['change'] }],
          password: [{ required: true, message: '* 密码不能为空', trigger: ['change'] }],
          authcode: [{ validator: authcodeValidate, trigger: ['change'] }]
        },
        needAuthCode: false,
        logging: false
      }
    }
  },
  computed: {
    buttonName() {
      return this.form.needAuthCode ? '验证' : '登录'
    }
  },
  methods: {
    ...mapActions(['login', 'refreshUserCache', 'refreshOptionsCache']),
    handleLoginClick() {
      const _this = this
      _this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _this.form.logging = true
          if (_this.form.needAuthCode && _this.form.model.authcode) {
            _this.handleLogin()
          } else {
            adminApi
              .loginPreCheck(_this.form.model.username, _this.form.model.password)
              .then((response) => {
                const data = response.data.data
                if (data && data.needMFACode) {
                  _this.form.needAuthCode = true
                  _this.form.model.authcode = null
                } else {
                  _this.handleLogin()
                }
              })
              .finally(() => {
                setTimeout(() => {
                  _this.form.logging = false
                }, 300)
              })
          }
        }
      })
    },
    handleLogin() {
      const _this = this
      _this.form.logging = true
      _this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _this
            .login(_this.form.model)
            .then((response) => {
              _this.$emit('success')
            })
            .finally(() => {
              setTimeout(() => {
                _this.form.logging = false
              }, 300)
            })
        }
      })
    }
  }
}
</script>
